<template>
  <div class="header-setting">
    <div class="menu-top" @click="handleCollapseMenu">
      <i v-if="isCollapseMenu" class="el-icon-s-unfold"/>
      <i v-else class="el-icon-s-fold"/>
    </div>
    <div class="setting">
      <div class="userIconWrapper">
        <img class="userIcon" src="@/assets/img/userIcon.png" alt="">
        <span>{{currentUser.name}}</span>
      </div>
      <div class="topLine">
        <img class="topLineImg" src="@/assets/img/topLine1.png" alt="">
      </div>
      <div class="logoutWrapper" @click="handleUserSetting">
        <img class="logoutImg" src="@/assets/img/logoutIcon.png" alt="">
        <span>退出登录</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import user from "@/store/user";

export default {
  name: 'HeaderSetting',
  props: ['eventFlag', 'positionCode'],
  components: {  },
  data () {
    return {
      form: {
        contractId: '',
        contractName: '',
        searchVal: '',
      },
      handOverShow: false,
    }
  },
  methods: {
    async handleUserSetting () {
      await this.$post(this.$api.user.logout);
      await this.$store.dispatch('_logout', !this.isCollapseMenu)

    },
    async handleCollapseMenu () {
      await this.$store.dispatch('_setMenuCollapse', !this.isCollapseMenu)
    },

  },
  computed: {
    ...mapState({
      showTagViews: state => state.user.showTagViews,
      isCollapseMenu: state => state.user.isCollapseMenu,
      userType: state => state.user.userType,
      type: state => state.user.type,
    }),
  },
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/base";

.userIcon {
  padding: 0 !important;
  vertical-align: middle;
  margin-bottom: 4px;
  margin-right: 7px;
}
.logoutImg {
  padding: 0 !important;
  vertical-align: middle;
  margin-bottom: 4px;
  margin-right: 7px;
  margin-left: 7px;
}
.header-setting {
  width: 100%;
  user-select: none;
  color: $--color-text1;
  font-size: 13px;
  font-weight: 600;
  background-color: #F2F4F7;
  @include flex-row-between-center;

  .menu-top {
    @include flex-row-center;
    margin-left: 10px;

    i {
      font-size: 24px;
    }
  }
}

.setting {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  flex: 1;
  height: 40px;
  /*width: 260px;*/
  line-height: 40px;
  box-sizing: border-box;
  font-size: 13px;
  color: rgba(67, 80, 105, 0.83);
  padding-right: 32px;
  /*border-left: 1px solid #d8dce5;*/
  @include flex-row-all-center();
  /*border-bottom: 1px solid #d8dce5;*/

  .el-dropdown-link {
    @include flex-row-all-center();
    .el-icon--right{
      margin-right: 8px;
    }
  }

  .cc-call {
    width: 70px;
    padding-right: 5px;
    border-right: 1px solid #d8dce5;

    .call-status {
      margin-left: 10px;
      color: $--color-primary;
    }
  }


  .user-dropdown {
    padding: 0 0 0 10px;

    .username-title {
      text-align: center;
      @include ellipsis(70px);
    }
  }

  .el-dropdown-link {
    color: $--color-text1;
  }

  img {
    height: 24px;
    padding: 8px 0 0 10px;
    line-height: 40px;
  }
}
</style>
